<template>
	<div>
    <div class="UploadBox">
    	<a-upload
        ref="upload"
    		name="file"
    		:headers="headers"
    		:action="uploadImageUrl"
    		listType="picture-card"
    		:fileList="uploadImageList"
        :beforeUpload="beforeUpload"
    		@preview="handlePreview"
    		@change="handleChange">
    		<div v-if="uploadImageList.length < maximum">
    			<a-icon type="plus" />
    		</div>
    	</a-upload>
      <AlbumPics v-if="uploadImageList.length < maximum" :isMultiple="true" :maximum="maximum - uploadImageList.length" @selectOk="selectPics">
        <div class="ant-upload ant-upload-select ant-upload-select-picture-card">
          <div class="ant-upload ant-upload-btn">
            <a-icon type="camera"/>
          </div>
        </div>
      </AlbumPics>
    </div>
    <a-modal title="查看图片" :footer="null" v-model="previewVisible">
      <img :src="previewImage" v-if="previewVisible" style="width: 100%">
    </a-modal>
  </div>
</template>
<script>
	import Vue from 'vue';
	import { ACCESS_TOKEN } from '@/store/mutation-types';
	import config from '@/config/axios.conf';
	import Server from '@/config/server';
  import AlbumPics from '@C/album/pics';
	export default {
    components: {
      AlbumPics,
    },
		props: {
			defaultImageList: Array,
			maximum: {
        type: Number,
        default: 3  //默认1个
			}
		},
    computed: {
      isSurplusNum(){
        return
      }
    },
		data() {
			return {
				// 请求头
				headers: {
					Accept: 'application/json',
					Authorization: `Bearer ${Vue.ls.get(ACCESS_TOKEN)}`,
				},
				// 后端地址
				uploadImageUrl: config.baseURL + Server.action.img_upload,
				previewVisible: false,// 查看图片窗口
				previewImage: '',     //图片显示地址
				uploadImageList: [],     //文件列表
        // surplusNum: this.maximum - this.defaultImageList.length,
        uidCode: 0,//蛋疼的uid唯一标识码
			}
		},
		methods: {
			handleCancel() {
				this.previewVisible = false
			},
      //查看大图
			handlePreview(file) {
				console.log(file);
				this.previewImage = file.url || file.thumbUrl
				this.previewVisible = true
			},
      //上传触发Change
			handleChange(info) {
        console.log(info);
        const isJPG = info.file.type === 'image/jpeg'
        const isPNG = info.file.type === 'image/png';
        const isPic = isJPG || isPNG;
        if (isPic || info.file.status === "removed") {
          this.uploadImageList = info.fileList
        }
			},
      //选择图库
      selectPics(pics) {
        console.log(pics);
        const _this = this;

        pics.forEach((pic, i) => {
          this.uidCode++
          let imageItem = {
            status: 'done',
            url: pic.pic_url,
            uid: _this.uidCode,
            name: pic.name,
          };
          _this.uploadImageList.push(imageItem);
          // _this.surplusNum--;
        });
        console.log(this.uploadImageList);
      },
      //上传前格式判断
      beforeUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png';
        // const isBMP = file.type === 'image/bmp';
        // const isGIF = file.type === 'image/gif';
        // const isWEBP = file.type === 'image/webp';
        // const isPic = isJPG || isPNG || isBMP || isGIF || isWEBP;
        const isPic = isJPG || isPNG;
        if (!isPic) {
          this.$notification.warning({
            message: '上传文件格式不正确',
            description: '只支持jpg，jpeg，png格式图片',
          });
        }
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('Image must smaller than 2MB!')
        }
        return isPic && isLt2M
      },
		},
    mounted() {
      console.log(this.defaultImageList);
      this.uploadImageList = this.defaultImageList
      // this.uploadImageList = this.$refs.upload.fileList;
    },
    watch: {
      defaultImageList(newList) {
        console.log(newList);
        this.uploadImageList = newList;
        this.uploadImageList = this.defaultImageList
        // this.uploadImageList = this.defaultImageList;
        // this.surplusNum = this.surplusNum - this.uploadImageList.length;
      },
    },
	}
</script>
<style lang="stylus" scoped>
	/* you can make up upload button and sample style by using stylesheets */
  .UploadBox {
    display: flex;
    // flex-wrap wrap;
  }
	.ant-upload-select-picture-card i {
		font-size: 32px;
		color: #999;
	}

	.ant-upload-select-picture-card .ant-upload-text {
		margin-top: 8px;
		color: #666;
	}

  >>> .ant-upload-list-item {
      width: 62px;
      height: 62px;
      padding: 0px;
      cursor: pointer;
  }
  >>> .ant-upload {
    width: 62px !important;
    height: 62px !important;
  }

</style>
